<script setup>
import { onMounted, ref } from 'vue'
import { MotionComponent } from '@vueuse/motion'
import AntdIcon from '@/components/AntdIcon/index.vue'
import AddAssets from './components/AddAssets.vue'
import { assetsListApi, deleteAssetsApi } from '@/service'
import { message, Modal } from 'ant-design-vue'
import ShowDetail from '@/components/Modal.vue'

const addAssetsRef = ref()
const detailsRef = ref()
const assetsList = ref([])
const assetDetail = ref('')
const searchObj = ref({
  page: 1,
  page_size: 3,
})
const total = ref(0)

const getAssetsList = () => {
  assetsListApi(searchObj.value).then((res) => {
    assetsList.value = res.items
    total.value = res.total_count
  })
}

const addAssetsSuccess = () => {
  searchObj.value.page = 1
  getAssetsList()
}

// 删除选择中加思培
const delGlobal = (id, index) => {
  Modal.confirm({
    title: '删除选择中加思培',
    content: '确认删除该选择中加思培吗？',
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      deleteAssetsApi({ asset_config_id: id }).then(() => {
        assetsList.value.splice(index, 1)
        message.success('删除成功')
      })
    },
  })
}
// 显示添加弹窗
const showModal = (type, record) => {
  if (type === 'add') {
    addAssetsRef.value.open()
  } else {
    const { id, asset_config_title, asset_config_url, asset_config_intro, asset_config_content } =
      record
    addAssetsRef.value.open({
      id,
      asset_config_title,
      asset_config_url,
      asset_config_intro,
      asset_config_content,
    })
  }
}

const viewDetail = (detail) => {
  assetDetail.value = detail
  detailsRef.value.open()
}

const paginationChange = (page, size) => {
  searchObj.value.page = page
  searchObj.value.page_size = size
  getAssetsList()
}

onMounted(() => {
  getAssetsList()
})
</script>
<template>
  <div class="flex flex-col gap-5">
    <a-card :bordered="false">
      <a-button type="primary" @click="showModal('add')">创建资产配置</a-button>
    </a-card>
    <MotionComponent preset="slideVisibleOnceRight">
      <a-card :bordered="false">
        <a-table :data-source="assetsList" :pagination="false" bordered>
          <a-table-column data-index="id" />
          <a-table-column title="标题" data-index="asset_config_title" />
          <a-table-column title="图片" data-index="asset_config_url">
            <template #default="{ text: asset_config_url }">
              <a-image :src="asset_config_url" :width="100" :height="60" />
            </template>
          </a-table-column>
          <a-table-column title="简介" data-index="asset_config_intro" width="30%" />
          <a-table-column title="详情" data-index="asset_config_content">
            <template #default="{ text: project_news_content }">
              <a-button type="link" size="small" @click="viewDetail(project_news_content)">
                查看详情
              </a-button>
            </template>
          </a-table-column>
          <a-table-column title="查看次数" data-index="asset_config_view_count">
            <template #default="{ text: asset_config_view_count }">
              <a-tag color="pink" :bordered="false"> {{ asset_config_view_count }}</a-tag>
            </template>
          </a-table-column>
          <a-table-column title="创建时间" data-index="create_time" />
          <a-table-column title="操作">
            <template #default="{ record, index }">
              <div class="flex gap-5">
                <a-button type="primary" @click="showModal('edit', record)">
                  <template #icon>
                    <AntdIcon icon="EditOutlined" />
                  </template>
                </a-button>
                <a-button type="primary" danger @click="delGlobal(record.id, index)">
                  <template #icon>
                    <AntdIcon icon="DeleteOutlined" />
                  </template>
                </a-button>
              </div>
            </template>
          </a-table-column>
        </a-table>
        <div class="mt-5 w-full flex justify-end">
          <a-pagination
            v-model:current="searchObj.page"
            v-model:pageSize="searchObj.page_size"
            show-size-changer
            :pageSizeOptions="['3', '5', '10', '20']"
            :total="total"
            :show-total="(total) => `共 ${total} 条数据`"
            @change="paginationChange"
          />
        </div>
      </a-card>
    </MotionComponent>
    <AddAssets ref="addAssetsRef" @addAssets="addAssetsSuccess" />
    <ShowDetail title="详情" width="1200px" ref="detailsRef">
      <div v-html="assetDetail"></div>
    </ShowDetail>
  </div>
</template>
